<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：评论页面
 *		作   者：Frank
 *		创建日期：2023/08/20
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/20			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="main">
		<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'"
			@scrolltolower="loadMore">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-user">
					<view class="item-user-head">
						<image class="item-user-head-avatar" :src="item.avatar" mode=""></image>
					</view>
					<view class="item-user-text">
						<view class="item-user-text-name">{{item.nick_name}}</view>	
						<view class="item-user-text-time">{{item.time}}</view>	
					</view>
				</view>
				<view class="item-text">{{item.text}}</view>
				<image class="item-img" :src="item.main_img" mode=""></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { configStore } from '@/store/modules/configStore.js'
	export default {
		data() {
			return {
				clientHeight:0,
				isEnd: false,
				list:[]
			}
		},
		computed:{
			...mapStores(configStore)
		},
		methods: {
			loadMore(){
				if(this.isEnd){
					return;
				}
				
				let id = -1;
				if(this.list.length > 0){
					id = this.list[this.list.length - 1].id;
				}
				
				$http.request({
					url:'comment/get_comment',
					data:{
						id
					}
				}).then( res => {
					let data = res.data;
					for(let i = 0; i < data.length; i++){
						let item = data[i];
						item.avatar = `../../static/avatar/${item.avatar}.jpg`; 
						item.main_img = utility.getWebPath(item.main_img);
						item.time = utility.timeToString(item.time);
						this.list.push(item);
					}
					
					// 判断 是否到了最后一页
					if(data.length == 0 || data.length < this.configStore.config.commentPageSize){
						this.isEnd = true;
					}
				}).catch( () => {
					uni.showToast({
						title:'获取热门晒单失败',
						icon:'none'
					})
				});					
			}
		},
		onLoad() {
			this.list = [];
			this.isEnd = false;
			this.loadMore();
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight;
				}
			})
			
		},
	}
</script>

<style scoped>
	.main{
		width: 100vw;
		height: 100vh;
		background-color: #F7F3f3;
		color: #747474;
		font-size: 30rpx;
	}
	.item{
		margin: 16rpx 0;
		padding: 16rpx 32rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
	}
	.item-user{
		display: flex;
		align-items: center;
	}
	.item-user-head{
		width: 100rpx;
		height: 100rpx;
	}
	.item-user-head-avatar{
		width: 100%;
		height: 100%;
		border: 6rpx solid #F7F3E3;
		border-radius: 50%;		
	}
	.item-user-text{
		padding-left: 16rpx;
	}
	.item-user-text-name{
		font-size: 32rpx;
		font-weight: bold;
	}
	.item-user-text-time{
		font-size: 26rpx;
	}
	.item-text{
		padding: 24rpx 0;
	}
	.item-img{
		width: 200rpx;
		height: 200rpx;
	}
</style>
